<!-- 权限页面 -->
<template>
  <div class="content">
    <Table height="430" border :columns="columns1" :data="datas"></Table>
    <Page :total="total" :page-size="pageSize" show-total @on-change="changepage" 
    style="position: absolute;right: 10px; margin-top: 10px; margin-bottom:10px;"></Page>
  </div>
</template>

<script>
import print from "../../components/print";
import palm from "../../components/palm";
import finger from "../../components/fingerprint";
import business from "../../components/business";
export default {
  name: "admin-permission",
  components: { print, palm, finger, business },
  data() {
    return {
      index: 1,
      ajaxHistoryData: [],
      dataCount: 0, // 初始化信息总条数
      pageSize: 5, // 每页显示多少条
      total: 10,
      vidourl: "",
      music: [
        "340403198702132637.m4a",
        "360481199812044037.m4a",
        "362201199310144811.m4a",
        "360102198907064317.m4a",
        "362323199503226219.m4a",
        "362322199701178450.m4a",
        "330326199604245613.m4a",
        "360732199605283659.m4a",
        "341221199403107674.m4a",
        "362329199610153017.m4a"
      ],
      columns1: [
        {
          title: "姓名",
          key: "name",
          align: "center"
        },
        {
          title: "身份证号",
          key: "idcard",
          align: "center",
          width: 160
        },
        {
          title: "手机号",
          key: "telephone",
          align: "center",
          width: 150
        },
        {
          title: "照片",
          key: "picture",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(print, {
                props: {
                  row: params.row
                },
                on: {}
              })
            ]);
          }
        },
        {
          title: "声纹",
          key: "record",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "volume-high",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      let audioPlay = document.getElementById("audioPlay");
                      /*在这里建议使用原生来获取，使用jQuery会有点问题*/
                      if (this.index == 2) {
                        var num = params.index + 5;
                        audioPlay.src = "static/audios/" + this.music[num];
                      } else {
                        audioPlay.src =
                          "static/audios/" + this.music[params.index];
                      }
                      audioPlay.load();
                      audioPlay.play();
                    }
                  }
                },
                "播放"
              )
            ]);
          }
        },
        {
          title: "指纹",
          key: "fingerprint",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(finger, {
                props: {
                  row: params.row
                },
                on: {}
              })
            ]);
          }
        },
        {
          title: "掌纹",
          key: "palm",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(palm, {
                props: {
                  row: params.row
                },
                on: {}
              })
            ]);
          }
        },
        {
          title: "办理地址",
          key: "site",
          width: 150,
          align: "center"
        },
        {
          title: "appeidcode",
          key: "appdc",
          width: 150,
          align: "center"
        },
        {
          title: "业务记录",
          key: "business",
          align: "center",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h(business, {
                props: {
                  row: params.row
                },
                on: {}
              })
            ]);
          }
        }
      ],
      datas: []
    };
  },
  props: {},
  computed: {},
  methods: {
    changepage(index) {
      this.transition();
      this.index = index;
      var tablear = {
        num: index,
        roles: this.$store.getters.roles //传值给roles
      };
      this.$store
        .dispatch("Tablechange", tablear)
        .then(data => {
          this.datas = data.datas;
        })
        .catch(err => {});
    },
    // 过度动画
    transition() {
      this.$Spin.show();
      setTimeout(() => {
        this.$Spin.hide();
      }, 500);
    }
  },
  watch: {},
  created() {
    this.transition();
  },
  mounted() {
    this.changepage(1);
  }
};
</script>

<style scoped>
.content {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
</style>